<!-- eslint-disable no-undef -->
<template>
  <div class="password-strength">
    <div class="strength-bar">
      <div :class="['strength-level', strengthClass]" :style="{ width: strengthPercent + '%' }"></div>
    </div>
    <div class="strength-text">{{ strengthText }}</div>
    <div class="strength-tips" v-if="showTips">
      <p>密码需要：</p>
      <ul>
        <li :class="{ 'satisfied': hasLength }">至少6个字符</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  password: {
    type: String,
    required: true
  },
  showTips: {
    type: Boolean,
    default: true
  }
})

const hasLength = computed(() => props.password.length >= 6)

const strengthClass = computed(() => {
  return hasLength.value ? 'strong' : 'weak'
})

const strengthText = computed(() => {
  return hasLength.value ? '合格' : '太短'
})

const strengthPercent = computed(() => {
  return hasLength.value ? 100 : 0
})
</script>

<style scoped>
.password-strength {
  margin-top: 5px;
}

.strength-bar {
  height: 5px;
  background-color: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.strength-level {
  height: 100%;
  transition: width 0.3s ease;
}

.weak {
  background-color: #ff4444;
}

.medium {
  background-color: #ffbb33;
}

.strong {
  background-color: #00C851;
}

.strength-text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.strength-tips {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.strength-tips ul {
  list-style: none;
  padding-left: 0;
  margin: 5px 0;
}

.strength-tips li {
  margin: 3px 0;
  color: #999;
}

.strength-tips li.satisfied {
  color: #00C851;
}

.strength-tips li::before {
  content: '✗';
  margin-right: 5px;
  color: #ff4444;
}

.strength-tips li.satisfied::before {
  content: '✓';
  color: #00C851;
}
</style> 